<template>
  <div>
    首页
    <ECharts style="width: 100%; height: 400px;" :option="option" />
    <ECharts style="width: 300px; height: 300px;" :option="option1" />
  </div>
</template>


<script setup lang="ts">
import { createComponent } from 'echarts-for-vue';
import * as echarts from 'echarts';
import { h } from 'vue';
import axios from 'axios';
const ECharts = createComponent({ echarts, h });

const option = ref({
  grid: {
    left: '0',
    right: '0',
    bottom: '0',
    top: "0",
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [1, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
})

const option1 = ref({
  grid: {
    left: '0',
    right: '0',
    bottom: '0',
    top: "20px",
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      type: 'bar'
    },
    {
      data: [],
      type: 'line'
    }
  ]
})

const _getPrivince = async () => {
  const resp = await axios.get('/api/list/province')
  const data = resp.data.data;
  const province: string[] = [], list: number[] = []
  Object.entries(data).forEach(v => {
    province.push(v[0].slice(0, 2))
    list.push(v[1] as number)
  })

  option.value = {
    grid: {
      left: '0',
      right: '0',
      bottom: '0',
      top: "10px",
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: province
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: list,
        type: 'bar'
      }
    ]
  }
}

const _getType = async () => {
  const resp = await axios.get('/api/list/type');
  const data = resp.data.data
  console.log(data)
  option1.value.xAxis.data = data.arr1
  option1.value.series[0].data = data.arr2
  option1.value.series[1].data = data.arr2
}

_getPrivince()
_getType()
</script>
<style lang="scss" scoped></style>
